<template>
	<view>
		<view class="client-list-range fillx frcc bsp10 t-bb-u">
			<!-- <view class="client-list-choose-market">
				<u-dropdown :isShowMask_bgc="false">
					<u-dropdown-item v-model="chooseMarket" :title="finalMarket" :options="marketList" @change="changeMarket" shape="square" @clear="clear"></u-dropdown-item>
				</u-dropdown>
			</view> -->
			<u-search 
				placeholder="姓名/手机号" 
				v-model="keyword" 
				:clearabled="true" 
				:animation="true" 
				bg-color="#eeeeee" 
				shape="square"
				border-color="#dddddd"
				@search="toSearch" 
				@custom="toSearch"
				>
			</u-search>
		</view>
		<!-- <view class="client-list-sort frcc fillx t-bb-u">
			<view class="client-list-level ha frcc"  @click="toSort('level')">
				级别
				<view class="iconfont icon-shangxiajiantou"></view>
			</view>
			<view class="client-list-register-time ha frcc" @click="toSort('register')">
				注册时间
				<view class="iconfont icon-shangxiajiantou"></view>
			</view>
		</view> -->
		<view class="client-list-content fillx fcss">
			<view class="client-item fillx frcc" v-for="item in isSearch?searchList:showList" :key="item.id">
				<image class="client-item-img" src="../../../../static/logo.png" mode="widthFix" @click="goClientDetail"></image>
				<view class="client-item-message fcss">
					<view class="client-item-message-name fillx frsc">
						<view class="client-item-level" :class="item.level<=3?'iconfont icon-xing':'iconfont icon-huangguan'"></view>
						{{item.name}}
						<!-- <text>{{item.phone_code}}</text> -->
					</view>
					<!-- <view class="client-item-message-level fillx frcc">
						级别：
						<text>{{level_List[item.level-1]}}</text>
					</view> -->
					<view class="client-item-message-register-wrap fillx frcc">
						<!-- 注册时间： -->
						<text>{{item.phone_code}}</text>
						<text class="client-item-message-register-time">{{item.register}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty class="client-list-empty" text="没有搜索结果" mode="search" :show="isShowEmpty"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseMarket: 1,
				marketList: [{
						label: '全部',
						value: 1,
					},
					{
						label: '第一市场',
						value: 2,
					},
					{
						label: '第二市场',
						value: 3,
					},
					{
						label: '第三市场',
						value: 4,
					}
				],
				keyword: '',
				clientList: [{
						id: 'abf1',
						name: '黄飞鸿',
						phone_code: '13346784260',
						level: 1,
						register: '2020-10-16',
						market_number: 1
					},
					{
						id: 'abf2',
						name: '张无忌',
						phone_code: '13846782359',
						level: 3,
						register: '2020-10-10',
						market_number: 2
					},
					{
						id: 'abf3',
						name: '张三丰',
						phone_code: '15315586158',
						level: 4,
						register: '2019-09-16',
						market_number: 3
					},
					{
						id: 'abf4',
						name: '十三姨',
						phone_code: '13656785657',
						level: 1,
						register: '2020-08-13',
						market_number: 2
					},
					{
						id: 'abf5',
						name: '周伯通',
						phone_code: '13486034556',
						level: 2,
						register: '2020-07-26',
						market_number: 3
					},
					{
						id: 'abf6',
						name: '黄蓉',
						phone_code: '18286714955',
						level: 2,
						register: '2019-11-16',
						market_number: 1
					},
					{
						id: 'abf7',
						name: '杨过',
						phone_code: '15415781554',
						level: 1,
						register: '2019-10-09',
						market_number: 1
					},
					{
						id: 'abf8',
						name: '小龙女',
						phone_code: '15976782453',
						level: 1,
						register: '2020-02-02',
						market_number: 2
					},
					{
						id: 'abf9',
						name: '郭靖',
						phone_code: '18678881211',
						level: 3,
						register: '2019-09-29',
						market_number: 3
					},
					{
						id: 'abf10',
						name: '小鱼儿',
						phone_code: '15325785951',
						level: 2,
						register: '2020-05-15',
						market_number: 1
					},
					{
						id: 'abf11',
						name: '花无缺',
						phone_code: '17464480950',
						level: 2,
						register: '2020-07-16',
						market_number: 1
					}
				],
				level_List: ['普通会员', '黄金会员', '铂金会员', '钻石会员'],
				level_sort: true,
				register_sort: true,
				showList: [],
				isSearch: false,
				searchList: [],
				isShowEmpty: false
			}
		},
		methods: {
			changeMarket(e) {
				this.chooseMarket = e
				uni.showToast({
					title: '选择了' + this.finalMarket,
					icon: 'none',
					duration: 1000
				})
			},
			toSort(type) {
				if (type === 'level') {
					if (this.level_sort) {
						if (this.isSearch) {
							this.searchList.sort((a, b) => a[type] - b[type])
						} else {
							this.showList.sort((a, b) => a[type] - b[type])
						}
						this.level_sort = false
					} else {
						if (this.isSearch) {
							this.searchList.sort((a, b) => b[type] - a[type])
						} else {
							this.showList.sort((a, b) => b[type] - a[type])
						}
						this.level_sort = true
					}
				} else {
					if (this.register_sort) {
						if (this.isSearch) {
							this.searchList.sort((a, b) => new Date(a[type]) - new Date(b[type]))
						} else {
							this.showList.sort((a, b) => new Date(a[type]) - new Date(b[type]))
						}
						this.register_sort = false
					} else {
						if (this.isSearch) {
							this.searchList.sort((a, b) => new Date(b[type]) - new Date(a[type]))
						} else {
							this.showList.sort((a, b) => new Date(b[type]) - new Date(a[type]))
						}
						this.register_sort = true
					}
				}
			},
			filterList(list, key, value) {
				return list.filter(a => a[key] === value)
			},
			toSearch(e) {
				if (e === '') {
					this.isSearch = false
				} else {
					this.isSearch = true
					let reg_number = /^[0-9]\d*$/g
					let reg_string = /^[\u4e00-\u9fa5]+$/g
					if (reg_number.test(e)) {
						this.searchList = this.showList.filter(a => a.phone_code.slice(0, e.length) === e)
					} else if (reg_string.test(e)) {
						this.searchList = this.showList.filter(a => a.name.slice(0, e.length) === e)
					} else {
						this.isShowEmpty = true
						uni.showToast({
							title: '请输入正确的姓名和手机号',
							icon: 'none',
							duration: 1000
						})
					}
				}
			},
			clear() {
				console.log('clear')
				this.isSearch = false
			},
			goClientDetail(){
				uni.navigateTo({
					url:'/pages/myPlace/market/clientList/clientDetail/clientDetail',
				})
			}
		},
		computed: {
			finalMarket() {
				return this.marketList[this.chooseMarket - 1].label
			}
		},
		watch: {
			chooseMarket() {
				let cm = this.chooseMarket - 1
				/* if(this.isSearch){
					this.searchList=cm===0?this.searchList:cm===1?this.filterList(this.searchList,'market_number',cm):cm===2?this.filterList(this.searchList,'market_number',cm):this.filterList(this.searchList,'market_number',cm)
				} */
				this.keyword = ''
				this.showList = cm === 0 ? this.clientList : cm === 1 ? this.filterList(this.clientList, 'market_number', cm) : cm ===
					2 ? this.filterList(this.clientList, 'market_number', cm) : this.filterList(this.clientList, 'market_number', cm)
			},
			keyword() {
				if (this.keyword === '') {
					this.isSearch = false
					this.isShowEmpty = false
				}
			},
			searchList() {
				if (this.isSearch) {
					this.searchList.length === 0 ? this.isShowEmpty = true : this.isShowEmpty = false
				}
			},
			showList() {
				if (!this.isSearch) {
					this.showList.length === 0 ? this.isShowEmpty = true : this.isShowEmpty = false
				}
			}
		},
		onShow() {
			this.showList = this.clientList
		}
	}
</script>

<style>
	.client-list-choose-market {
		width: 28%;
	}

	/* #ifdef H5*/
	.client-list-range {
		padding: 20rpx;
		background-color: #e83e41;
		position: sticky;
		top: 88rpx;
		z-index: 998;
	}

	/* #endif */
	/* #ifdef APP-PLUS*/
	.client-list-range {
		padding: 20rpx;
		background-color: #e83e41;
		position: sticky;
		top: 0;
		z-index: 998;
	}

	/* #endif */

	.client-item-level {
		margin-right: 40rpx;
		color: #e32f18;
		font-size: 40rpx;
		font-weight: 500;
	}

	.client-list-level,
	.client-list-register-time {
		padding: 20rpx;
	}

	.client-list-level {
		border-right: 1px solid #d7d7d7;
	}

	.client-item {
		box-sizing: border-box;
		padding: 20rpx;
		border-bottom: 1px solid #d7d7d7;
	}

	.client-item-img {
		width: 15vw;
		height: 15vw;
		border-radius: 3vw;
	}

	.client-item-message {
		box-sizing: border-box;
		padding-left: 20rpx;
		flex: 1;
	}

	.client-item-message-level,
	.client-item-message-register-wrap {
		justify-content: space-between;
	}

	.client-item-message-register-time {
		color: rgba(0,0,0,.5);
	}

	.client-list-empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
